<script>
	export let content = [];
	export let current = -1;

	let scrollRef = null;

	$: {
		if (scrollRef && current > 0) {
			scrollRef
				.querySelector('.active-lyric')
				?.scrollIntoView({ behavior: 'smooth', block: 'center' });
		}
	}
</script>

<div class="container">
	<div class="top" />
	<div class="lyrics" bind:this={scrollRef}>
		{#each content as lyric, i}
			<p class:active-lyric={i == current}>
				{lyric}
			</p>
		{/each}
	</div>
	<div class="bottom" />
</div>

<style lang="scss">
	.container {
		position: relative;
		.lyrics {
			max-height: 480px;
			overflow-y: scroll;

			&::-webkit-scrollbar {
				width: 0 !important;
			}

			.active-lyric {
				color: var(--active-text-color);
				font-size: 1.2em;
			}
		}

		.top,
		.bottom {
			width: 100%;
			height: 8em;
			float: left;
			position: absolute;
		}
		.top {
			top: 0;
			background: linear-gradient(180deg, var(--bg-color), transparent);
		}
		.bottom {
			bottom: 0;
			background: linear-gradient(0, var(--bg-color), transparent);
		}
	}
</style>
